<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>逗游吧后台框架</title>
    <% include ../include/docs-link %>
</head>
<body class="wrapper-body">
<% include ../include/docs-header %>
<div class="wrapper-container">
    <div class="container-fluid">
        <div class="row no-gutter">
            <div class="col-2">
                <% include ../include/docs-nav %>
            </div>
            <div class="col-10">
                <div class="wrapper-content">
                    <article class="wrapper-article">
                        <h1>Input 输入框</h1>
                        <div class="anchor">
                            <h2 id="概述">概述</h2>
                            <a href="#概述">#</a>
                        </div>
                        <p>在Bootstrap的基础上扩展了select输入框</p>
                        <div class="anchor">
                            <h2 id="基础用法">基础用法</h2>
                            <a href="#基础用法">#</a>
                        </div>
                        <p>适用广泛的基础单选</p>
                        <div class="example">
                            <div class="example-case">
                                <div class="container-fluid">
                                    <div class="row no-gutter">
                                        <div class="col-3">
                                            <select name="name" class="form-control" dy8-unit="select" title="请选择城市">
                                                <option value="1">福州市</option>
                                                <option value="2">厦门市</option>
                                                <option value="3">泉州市</option>
                                                <option value="4">宁德市</option>
                                                <option value="5">南平市</option>
                                                <option value="6">龙岩市</option>
                                                <option value="7">莆田市</option>
                                                <option value="8">三明市</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="example-code">
    <pre><code class="html">
    &lt;div class="container-fluid"&gt;
        &lt;div class="row no-gutter"&gt;
            &lt;div class="col-3"&gt;
                &lt;select name="name" class="form-control" dy8-unit="select" title="请选择城市"&gt;
                    &lt;option value="1"&gt;福州市&lt;/option&gt;
                    &lt;option value="2"&gt;厦门市&lt;/option&gt;
                    &lt;option value="3"&gt;泉州市&lt;/option&gt;
                    &lt;option value="4"&gt;宁德市&lt;/option&gt;
                    &lt;option value="5"&gt;南平市&lt;/option&gt;
                    &lt;option value="6"&gt;龙岩市&lt;/option&gt;
                    &lt;option value="7"&gt;莆田市&lt;/option&gt;
                    &lt;option value="8"&gt;三明市&lt;/option&gt;
                &lt;/select&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    </code></pre>
                            </div>
                            <div class="example-desc">
                                给select元素添加属性 dy8-unit 值为 "select" 即可生成。
                            </div>
                            <div class="example-code-more">
                                <i class="glyphicon glyphicon-triangle-bottom"></i>
                                <span>Show Code</span>
                            </div>
                        </div>
                        <div class="anchor">
                            <h2 id="基础多选">基础多选</h2>
                            <a href="#基础多选">#</a>
                        </div>
                        <p>适用性较广的基础多选，用 Tag 展示已选项</p>
                        <div class="example">
                            <div class="example-case">
                                <div class="container-fluid">
                                    <div class="row no-gutter">
                                        <div class="col-3">
                                            <select class="form-control" dy8-unit="select" multiple title="请选择城市">
                                                <option value="1">福州市</option>
                                                <option value="2">厦门市</option>
                                                <option value="3">泉州市</option>
                                                <option value="4">宁德市</option>
                                                <option value="5">南平市</option>
                                                <option value="6">龙岩市</option>
                                                <option value="7">莆田市</option>
                                                <option value="8">三明市</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="example-code">
                                <pre><code class="html">
    &lt;div class="container-fluid"&gt;
        &lt;div class="row no-gutter"&gt;
            &lt;div class="col-3"&gt;
                &lt;select class="form-control" dy8-unit="select" multiple title="请选择城市"&gt;
                    &lt;option value="1"&gt;福州市&lt;/option&gt;
                    &lt;option value="2"&gt;厦门市&lt;/option&gt;
                    &lt;option value="3"&gt;泉州市&lt;/option&gt;
                    &lt;option value="4"&gt;宁德市&lt;/option&gt;
                    &lt;option value="5"&gt;南平市&lt;/option&gt;
                    &lt;option value="6"&gt;龙岩市&lt;/option&gt;
                    &lt;option value="7"&gt;莆田市&lt;/option&gt;
                    &lt;option value="8"&gt;三明市&lt;/option&gt;
                &lt;/select&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
                                </code></pre>
                            </div>
                            <div class="example-desc">
                                <div class="example-desc">
                                    给select元素添加属性 multiple 即可。
                                </div>
                            </div>
                            <div class="example-code-more">
                                <i class="glyphicon glyphicon-triangle-bottom"></i>
                                <span>Show Code</span>
                            </div>
                        </div>
                        <div class="anchor">
                            <h2 id="带搜索的方式">带搜索的方式</h2>
                            <a href="#带搜索的方式">#</a>
                        </div>
                        <p>可以利用搜索功能快速查找选项</p>
                        <div class="example">
                            <div class="example-case">
                                <div class="container-fluid">
                                    <div class="row no-gutter">
                                        <div class="col-3">
                                            <select class="form-control" dy8-unit="select" data-live-search="true" multiple title="请选择城市">
                                                <option value="1">福州市</option>
                                                <option value="2">厦门市</option>
                                                <option value="3">泉州市</option>
                                                <option value="4">宁德市</option>
                                                <option value="5">南平市</option>
                                                <option value="6">龙岩市</option>
                                                <option value="7">莆田市</option>
                                                <option value="8">三明市</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="example-code">
                                <pre><code class="html">
    &lt;div class="container-fluid"&gt;
        &lt;div class="row no-gutter"&gt;
            &lt;div class="col-3"&gt;
                &lt;select class="form-control" dy8-unit="select" data-live-search="true" multiple title="请选择城市"&gt;
                    &lt;option value="1"&gt;福州市&lt;/option&gt;
                    &lt;option value="2"&gt;厦门市&lt;/option&gt;
                    &lt;option value="3"&gt;泉州市&lt;/option&gt;
                    &lt;option value="4"&gt;宁德市&lt;/option&gt;
                    &lt;option value="5"&gt;南平市&lt;/option&gt;
                    &lt;option value="6"&gt;龙岩市&lt;/option&gt;
                    &lt;option value="7"&gt;莆田市&lt;/option&gt;
                    &lt;option value="8"&gt;三明市&lt;/option&gt;
                &lt;/select&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
                                </code></pre>
                            </div>
                            <div class="example-desc">
                                给select元素添加属性 data-live-search 值为 true 即可。
                            </div>
                            <div class="example-code-more">
                                <i class="glyphicon glyphicon-triangle-bottom"></i>
                                <span>Show Code</span>
                            </div>
                        </div>
                    </article>
                </div>
            </div>
        </div>
    </div>
</div>
<% include ../include/docs-footer %>
</body>
</html>